<template>
    <div class="recommended-top-bar">
        <div class="circle">
        </div>
        <p class="top-bar-name">{{topBarName}}</p>
        <div class="grid grid-cols-4 divide-x divide-gray-300 top-bar-tag" v-show="topBarTag.length != 0">
<!--            因为a标签默认样式已经被取消，所以需要自己模拟a标签效果-->
            <div v-for="(item, index) in topBarTag" :key="index" class="top-bar-tag-item" @click="getRouterToPlayListByCategory(item, topBarName)">
                {{ item }}
            </div>
        </div>
        <div class="more-info">
            <p @click="getRouterToMore(topBarName)">更多</p>
            <div class="right-triangle">
            </div>
        </div>
    </div>
</template>

<script>
import {useNotification} from "naive-ui";
import {useRouter} from "vue-router";

export default {
    name: "RecommendedTopBar",
    props: {
        // 推荐栏名字
        topBarName: String,
        // 推荐栏分类
        topBarTag: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    setup() {
        const router = useRouter();
        // 通知组件
        const notification = useNotification();
        const getRouterToPlayListByCategory = (cat) => {
            if (cat === '') {
                notification['error']({
                    content: '标签链接获取错误',
                    meta: '切勿重复点击'
                })
                return;
            } else {
                router.push({path: '/discover/playlist', query: {category: cat}});
            }
        }
        const getRouterToMore = (topBarName) => {
            if (topBarName === '') {
                return null;
            } else if (topBarName === '新碟上架') {
                router.push({path: '/discover/album'});
            } else if (topBarName === '榜单') {
                router.push({path: '/discover/toplist'});
            } else {
                router.push({path: '/discover/playlist'});
            }
        }
        return {
            getRouterToPlayListByCategory,
            getRouterToMore
        }
    }
}
</script>

<style lang="scss" scoped>
.recommended-top-bar {
    @apply flex m-4 border-b-2 border-red-700;
    .circle {
        @apply m-4 bg-red-700;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        mask: radial-gradient(transparent 3px, #000 3px);
    }
    
    .top-bar-name {
        @apply text-2xl font-light my-auto;
    }
    
    .top-bar-tag {
        @apply mx-16 my-auto font-normal;
        color: #666;
        .top-bar-tag-item {
            @apply cursor-pointer hover:underline px-4;
        }
    }
    .more-info {
        @apply flex my-auto ml-auto cursor-pointer hover:underline;
        color: #666;
        .right-triangle {
            @apply mx-2 my-auto;
            width: 0px;
            height: 0px;
            border-width: 5px;
            border-style: solid;
            border-color: #FFF #FFF #FFF #b91c1c;
        }
    }
    
}
</style>